<template>
  <div class="main">
    <!-- 购物车无数据 -->
    <div v-show="!flag" class="noGoods">
      <div>你还没有商品加入购物车哟！</div>
      <div>
        去购物吧！
        <router-link to="/StoreMain"
          ><div class="goShopping"></div
        ></router-link>
      </div>
    </div>
    <!-- 购物车有数据 -->
    <div class="public-shop-cart" v-show="flag">
      <div class="content">
        <span>我的购物车</span>
        <div class="cart-title">
          <span>
            <input
              v-model="isAll"
              @change="handleChangeAll()"
              type="checkbox"
            />
            <label for="all">全选</label>
          </span>
          <span>商品</span>
          <span>单价</span>
          <span>数量</span>
          <span>小计</span>
          <span>操作</span>
        </div>
        <div class="cart-detail" v-for="(items, index) in goods" :key="index">
          <input
            type="checkbox"
            v-model="checklist"
            :value="items"
            @change="handleChange()"
          />
          <div class="cart-title">
            <img :src="items.pic" alt="" />
            <div>{{ items.name }}</div>
          </div>
          <div class="cart-price">&yen;{{ items.price }}</div>
          <div class="cart-number">
            <el-button
              size="small"
              @click="items.number--"
              :disabled="items.number === 1"
              >-</el-button
            >
            <!-- <input type="text" v-model="goodsDetail.number" /> -->
            <el-input v-model="items.number" />
            <el-button size="small" @click="items.number++">+</el-button>
          </div>
          <div class="cart-subtotal">&yen;{{ items.price * items.number }}</div>
          <el-button type="danger" text @click="handleDeleteClick(index, items)"
            >删除</el-button
          >
        </div>

        <div class="cart-btn">
          <span>总价：</span><span> ¥{{ sum() }} </span>
          <el-button
            class="btn"
            @click="payMoney()"
            :disabled="checklist.length === 0"
            >去结算</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, watch, onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { seachUserCart, delCart } from "@/api/api.js";
export default {
  name: "shoppingCart",
  setup() {
    // 引入vuex
    const store = useStore();
    // 引入路由
    const router = useRouter();
    // 是否全选
    const isAll = ref(false);
    // 已经勾选的商品数组
    const checklist = ref([]);
    // 决定显示有无数据
    const flag = ref(false);
    //  已加入购物车的数组
    const goods = ref("");
    // 购物车数组长度
    const shopLen = ref("");
    // 登录用户的id
    const userId = store.state.userInfo.info.id;
    // 页面加载获取该用户购物车数据
    onMounted(() => {
      seachUserCart("get", userId).then((res) => {
        shopLen.value = res.data.length;
        goods.value = res.data;
      });
    });
    // 开启监听数组长度，等于0，显示无数据状态，大于0显示有数据状态
    watch(
      shopLen,
      (nv, ov) => {
        console.log("监听");
        if (nv > 0) {
          flag.value = true;
        } else {
          flag.value = false;
        }
      },
      { deeep: true, immediate: true }
    );
    // 计算总价
    const sum = () => {
      let total = 0;
      checklist.value.forEach((items) => {
        total += items.price * items.number;
      });
      return total;
    };
    const handleDeleteClick = (index, items) => {
      ElMessageBox.confirm("确定从购物车移除该商品吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        // 删除 goods 列表中的 第 index 项
        goods.value.splice(index, 1);
        // 当  checklist 中的 某一个 items 的 id = 删除的 goods 列表第 index 项的 id 时，
        // 把checklist 这一项过滤掉，然后重新生成 checklist
        checklist.value = checklist.value.filter((items) => items.id !== items.id);
        delCart("DELETE", items.id).then(() => [
          seachUserCart("get", userId).then((res) => {
            shopLen.value = res.data.length;
            goods.value = res.data;
          }),
        ]);
      });
    };
    const handleChangeAll = () => {
      console.log("isAll:" + isAll.value);
      console.log("全选");
      if (isAll.value) {
        // console.log(1);
        checklist.value = goods.value;
        // console.log(11111111111111111,checklist.value);
      } else {
        console.log(2);
        console.log(checklist.value);
        //  console.log(goodsList.value);
        console.log(goods.value);
        checklist.value = [];
        // checklist.value.splice(0) //有bug全选后取消全选会导致vuex数据清空
      }
    };
    const handleChange = () => {
      if (checklist.value.length === goods.value.length) {
        isAll.value = true;
      } else {
        isAll.value = false;
      }
    };
    // 支付

    const payMoney = () => {
      console.log(checklist.value);
      let num = checklist.value.length;
      let sumPrice = sum();
      let data = JSON.stringify(checklist.value);
      console.log(data);
      router.push({
        name: "SettleAccounts",
        query: { num, sumPrice, data },
      });
    }
    return {
      isAll,
      checklist,
      goods,
      flag,
      sum,
      handleChangeAll,
      handleChange,
      handleDeleteClick,
      payMoney,
    };
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 70%;
  height: 100%;
  min-width: 1090px;
  min-height: 100px;
  margin: 0 auto;
  border-radius: 15px;
  background-color: #dcdcdc;
  padding-top: 15px;
  .noGoods {
    width: 100%;
    text-align: center;
    color: red;
    font-size: 30px;
    line-height: 100px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    div {
      display: flex;
      justify-content: center;
    }
    .goShopping {
      width: 90px;
      height: 90px;
      border-radius: 50px;
      background: url(@/assets/goShopping.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}

.public-shop-cart > .content {
  width: 100%;
  background-color: #fff;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
}
.public-shop-cart > .content > span {
  font-size: 20px;
  color: #e2231a;
  border-bottom: 1px solid #e2231a;
  height: 30px;
  width: 100px;
  padding: 3px;
}
.public-shop-cart > .content > .cart-title {
  height: 32px;
  background-color: #f3f3f3;
  border: 1px solid #eee;
  display: grid;
  grid-template-columns: 100px 1fr 100px 120px 100px 100px;
  align-items: center;
  padding-left: 10px;
  text-align: center;
}
.public-shop-cart > .content > .cart-detail {
  background-color: #fff4e8;
  border-bottom: 1px solid #ddd;
  padding: 20px 5px;
  display: grid;
  grid-template-columns: 40px 1fr 100px 120px 100px 100px;
  align-items: center;
  justify-items: center;
}
.public-shop-cart > .content > div.cart-detail:last-of-type {
  border-bottom: none;
}
.public-shop-cart > .content > .cart-detail > .cart-title {
  display: flex;
}
.public-shop-cart > .content > .cart-detail > .cart-title > div {
  width: 300px;
  padding: 0 15px;
  display: flex;
  flex-flow: column wrap;
}
.public-shop-cart > .content > .cart-detail > .cart-title > div > a > i {
  font-style: normal;
  color: #fff;
  background-color: #e2231a;
  border-radius: 3px;
  padding: 0 5px;
}
.public-shop-cart > .content > .cart-detail > .cart-title > div > a:hover {
  color: #e2231a;
}
.public-shop-cart > .content > .cart-detail > .cart-title > div > span > i {
  color: #e2231a;
  margin-right: 5px;
}
.public-shop-cart
  > .content
  > .cart-detail
  > .cart-title
  > div
  > span
  > a:hover {
  color: #e2231a;
}
.public-shop-cart > .content > .cart-detail > .cart-title > img {
  width: 80px;
  height: 80px;
}
.public-shop-cart > .content > .cart-detail > .cart-number {
  display: flex;
}

.public-shop-cart > .content > .cart-detail > .cart-number {
  .el-input {
    width: 60px;
    height: 24px;

    ::v-deep .el-input__inner {
      text-align: center;
    }
  }

  span {
    width: 20px;
    height: 20px;
    border: 1px solid #aaa;
    font-size: 15px;
    text-align: center;
  }
}
.public-shop-cart > .content > .cart-detail > .cart-number > span:hover {
  cursor: pointer;
}
.public-shop-cart > .content > .cart-btn {
  margin-top: 50px;
  height: 50px;
  display: flex;
  justify-content: end;
  align-items: center;
  border: 1px solid #ddd;
}
.public-shop-cart > .content > .cart-btn > span:last-of-type {
  font-size: 20px;
  color: #e2231a;
  margin: 0 10px;
  font-weight: bold;
}
.public-shop-cart > .content > .cart-btn > .btn {
  width: 100px;
  height: 100%;
  font-size: 20px;
  color: #fff;
  border: none;
  background-color: #e2231a;
}
.btn[disabled] {
  color: white !important;
  background: #989898 !important;
}
#content {
  width: 100%;
  height: 100%;
}
.head {
  height: 60px;
  margin: 30px 30px;
}
ul li {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 30px;
}
li img {
  width: 80px;
  height: 120px;
}
footer > p {
  margin-left: 30px;
  float: left;
}
footer > div {
  margin-right: 30px;
  float: right;
}
</style>